OpenLayers Zoom Fade + Resize Transition Effect
Taking the inspiration from Leaffet which uses modern browsers’ css3 transition effect to add a fade effect to map zoom/pan, I quickly customised OpenLayers to do similar thing.
The fade effect is supported well in modern version of Firefox and Chrome, as well as in IE10+. For IE 6, 7 and 8, I use the javascript timer to transition the opacity of a tile.
Get the code from
https://github.com/lydonchandra/openlayers/blob/release-2.11/lib/OpenLayers/Tile/Image.js
or
OpenLayers-distro/OpenLayers-2.11/lib/OpenLayers/Tile/Image.js
show: function(isResize, ratio) {
if( OpenLayers.Util.getBrowserName() === 'msie' ) {
if( isResize &&
this.frame.style.display === 'none' &&
ratio !== undefined && ratio > 1 ) {
//console.log( 'resizing, ratio==' + ratio + ' display==' + this.frame.style.display );
this.frame.style.display = '';
// style.opacity is only supported by IE9+
this.frame.style.opacity = 0;
// have to use filter for IE7 and IE8
this.frame.style.filter = 'alpha(opacity=' + 0 + ')';
var theFrame0 = this.frame;
window.setTimeout(
function() {
theFrame0.style.opacity = 0.5;
theFrame0.style.filter = 'alpha(opacity=' + 50 + ')';
// window.setTimeout(
// function() {
// theFrame0.style.opacity = 0.4;
// theFrame0.style.filter = 'alpha(opacity=' + 40 + ')';
// window.setTimeout(
// function() {
// theFrame0.style.opacity = 0.6;
// theFrame0.style.filter = 'alpha(opacity=' + 60 + ')';
// window.setTimeout(
// function() {
// theFrame0.style.opacity = 0.8;
// theFrame0.style.filter = 'alpha(opacity=' + 80 + ')';
//
window.setTimeout( function(){
theFrame0.style.opacity = 1;
theFrame0.style.filter = 'alpha(opacity=' + 100 + ')';
}, 100);
// }, 100
//
// );
//
// }, 100
//
// );
//
// }, 100
// );
}, 100 );
} else if( !isResize && ratio === 1 && this.frame.style.display === 'none'){
// console.log('resizing, ratio==' + ratio);
this.frame.style.opacity = 1;
this.frame.style.display = '';
this.frame.style.filter = 'alpha(opacity=' + 100 + ')';
} else {
// console.log('else --- ratio==' + ratio + ' display==' + this.frame.style.display + ' isResize==' + isResize );
// this.frame.style.opacity = 1;
// this.frame.style.display = '';
// this.frame.style.filter = 'alpha(opacity=' + 100 + ')';
if( this.frame.style.display === 'none' ) {
this.frame.style.display = '';
// style.opacity is only supported by IE9+
this.frame.style.opacity = 0;
// have to use filter for IE7 and IE8
this.frame.style.filter = 'alpha(opacity=' + 0 + ')';
var theFrame0 = this.frame;
window.setTimeout(
function() {
theFrame0.style.opacity = 0.5;
theFrame0.style.filter = 'alpha(opacity=' + 50 + ')';
// window.setTimeout(
// function() {
// theFrame0.style.opacity = 0.4;
// theFrame0.style.filter = 'alpha(opacity=' + 40 + ')';
// window.setTimeout(
// function() {
// theFrame0.style.opacity = 0.6;
// theFrame0.style.filter = 'alpha(opacity=' + 60 + ')';
// window.setTimeout(
// function() {
// theFrame0.style.opacity = 0.8;
// theFrame0.style.filter = 'alpha(opacity=' + 80 + ')';
window.setTimeout( function(){
theFrame0.style.opacity = 1;
theFrame0.style.filter = 'alpha(opacity=' + 100 + ')';
}, 200);
// }, 100
// );
// }, 100
// );
//
// }, 100
// );
}, 200 );
}
}
}
else {
if( !isResize &&
this.frame.style.display === 'none' ) {
this.frame.style.opacity = 0;
this.frame.style.display = '';
this.frame.style.transition = 'opacity 0.5s ease-in';
this.frame.style.WebkitTransition = 'opacity 0.5s ease-in';
this.frame.style.MozTransition = 'opacity 0.5s ease-in';
var theFrame = this.frame;
setTimeout( function() {
// have to give it some time and then set the opacity
// otherwise the transition effect won't kick in
theFrame.style.opacity = 1;
}, 50 );
} else {
this.frame.style.opacity = 1;
// remove transition effect so it doesn't get applied everytime,
// we control when it gets applied (only when showing the tile as above)
this.frame.style.transition = '';
this.frame.style.WebkitTransition = '';
this.frame.style.MozTransition = '';
this.frame.style.display = '';
}
}
// Force a reflow on gecko based browsers to actually show the element
// before continuing execution.
if (OpenLayers.Util.indexOf(this.layer.SUPPORTED_TRANSITIONS,
this.layer.transitionEffect) != -1) {
if (OpenLayers.IS_GECKO === true) {
// this.frame.scrollLeft = this.frame.scrollLeft;
}
}
}
```Subscribe to Lydon's blog
Get the latest posts delivered right to your inbox